---
title: Spec - howl.ui.style
tags: spec
---
<div class="spec-group spec-group-1">

<h1 id="howl.ui.style">howl.ui.style</h1>

<pre class="highlight moonscript"><code><span class="kd">local</span><span class="w"> </span><span class="n">buffer</span><span class="w">

</span><span class="n">before_each</span><span class="w"> </span><span class="o">-&gt;</span><span class="w">
    </span><span class="n">buffer</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nc">Buffer</span><span class="w"> </span><span class="p">{}</span></code></pre>


<h4 id="styles-can-be-accessed-using-direct-indexing">styles can be accessed using direct indexing</h4>

<pre class="highlight moonscript"><code><span class="n">t</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ss">styles:</span><span class="w"> </span><span class="ss">default:</span><span class="w"> </span><span class="ss">color:</span><span class="w"> </span><span class="s1">'#998877'</span><span class="w">
</span><span class="n">style</span><span class="p">.</span><span class="n">set_for_theme</span><span class="w"> </span><span class="n">t</span><span class="w">
</span><span class="n">assert</span><span class="p">.</span><span class="n">equal</span><span class="w"> </span><span class="n">style</span><span class="p">.</span><span class="n">default</span><span class="p">.</span><span class="n">color</span><span class="p">,</span><span class="w"> </span><span class="n">t</span><span class="p">.</span><span class="n">styles</span><span class="p">.</span><span class="n">default</span><span class="p">.</span><span class="n">color</span></code></pre>


<h4 id=".at_pos(buffer,-pos)-returns-name-and-style-definition-at-pos">.at_pos(buffer, pos) returns name and style definition at pos</h4>

<pre class="highlight moonscript"><code><span class="n">style</span><span class="p">.</span><span class="n">define</span><span class="w"> </span><span class="s1">'stylish'</span><span class="p">,</span><span class="w"> </span><span class="ss">color:</span><span class="w"> </span><span class="s1">'#101010'</span><span class="w">
</span><span class="n">buffer</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nc">ActionBuffer</span><span class="o">!</span><span class="w">
</span><span class="n">buffer</span><span class="o">\</span><span class="n">insert</span><span class="w"> </span><span class="s1">'hƏllo'</span><span class="p">,</span><span class="w"> </span><span class="mi">1</span><span class="p">,</span><span class="w"> </span><span class="s1">'keyword'</span><span class="w">
</span><span class="n">buffer</span><span class="o">\</span><span class="n">insert</span><span class="w"> </span><span class="s1">'Bačon'</span><span class="p">,</span><span class="w"> </span><span class="mi">6</span><span class="p">,</span><span class="w"> </span><span class="s1">'stylish'</span><span class="w">

</span><span class="n">name</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">style</span><span class="p">.</span><span class="n">at_pos</span><span class="p">(</span><span class="n">buffer</span><span class="p">,</span><span class="w"> </span><span class="mi">5</span><span class="p">)</span><span class="w">
</span><span class="n">assert</span><span class="p">.</span><span class="n">equal</span><span class="w"> </span><span class="n">name</span><span class="p">,</span><span class="w"> </span><span class="s1">'keyword'</span></code></pre>

<div class="spec-group spec-group-2">

<h2 id=".define(name,-definition)">.define(name, definition)</h2>

<h4 id="allows-defining-custom-styles">allows defining custom styles</h4>

<pre class="highlight moonscript"><code><span class="n">style</span><span class="p">.</span><span class="n">define</span><span class="w"> </span><span class="s1">'custom'</span><span class="p">,</span><span class="w"> </span><span class="ss">color:</span><span class="w"> </span><span class="s1">'#334455'</span><span class="w">
</span><span class="n">assert</span><span class="p">.</span><span class="n">equal</span><span class="w"> </span><span class="n">style</span><span class="p">.</span><span class="n">custom</span><span class="p">.</span><span class="n">color</span><span class="p">,</span><span class="w"> </span><span class="s1">'#334455'</span></code></pre>


<h4 id="allows-aliasing-styles-using-a-string-as-&lt;definition&gt;">allows aliasing styles using a string as &lt;definition&gt;</h4>

<pre class="highlight moonscript"><code><span class="n">style</span><span class="p">.</span><span class="n">define</span><span class="w"> </span><span class="s1">'target'</span><span class="p">,</span><span class="w"> </span><span class="ss">color:</span><span class="w"> </span><span class="s1">'#beefed'</span><span class="w">
</span><span class="n">style</span><span class="p">.</span><span class="n">define</span><span class="w"> </span><span class="s1">'alias'</span><span class="p">,</span><span class="w"> </span><span class="s1">'target'</span><span class="w">
</span><span class="n">assert</span><span class="p">.</span><span class="n">equal</span><span class="w"> </span><span class="s1">'#beefed'</span><span class="p">,</span><span class="w"> </span><span class="n">style</span><span class="p">.</span><span class="n">alias</span><span class="p">.</span><span class="n">color</span></code></pre>

</div>
<div class="spec-group spec-group-2">

<h2 id="define_default(name,-definition)">define_default(name, definition)</h2>

<h4 id="defines-the-style-only-if-it-is-not-already-defined">defines the style only if it is not already defined</h4>

<pre class="highlight moonscript"><code><span class="n">style</span><span class="p">.</span><span class="n">define_default</span><span class="w"> </span><span class="s1">'preset'</span><span class="p">,</span><span class="w"> </span><span class="ss">color:</span><span class="w"> </span><span class="s1">'#334455'</span><span class="w">
</span><span class="n">assert</span><span class="p">.</span><span class="n">equal</span><span class="w"> </span><span class="n">style</span><span class="p">.</span><span class="n">preset</span><span class="p">.</span><span class="n">color</span><span class="p">,</span><span class="w"> </span><span class="s1">'#334455'</span><span class="w">

</span><span class="n">style</span><span class="p">.</span><span class="n">define_default</span><span class="w"> </span><span class="s1">'preset'</span><span class="p">,</span><span class="w"> </span><span class="ss">color:</span><span class="w"> </span><span class="s1">'#667788'</span><span class="w">
</span><span class="n">assert</span><span class="p">.</span><span class="n">equal</span><span class="w"> </span><span class="n">style</span><span class="p">.</span><span class="n">preset</span><span class="p">.</span><span class="n">color</span><span class="p">,</span><span class="w"> </span><span class="s1">'#334455'</span></code></pre>

</div>
</div>
